<script setup>
import * as testApi from '@/api/testApi'
import { ElMessage } from 'element-plus';
import QRCodeVue3 from "qr-code-generator-vue3";

import { ref } from 'vue'

const testList = ref([])
const totalRef = ref(0)

fetchTestList()

/**
 * 查找所有试卷
 */
function fetchTestList() {
  testApi.findByPage().then(({ code, data }) => {
    testList.value = data.data.map((item) => {
      // 字符串 转 数字。e.g. "1702987200000"  --> 1702987200000
      item.start_time = +item.start_time
      item.stop_time = +item.stop_time
      item.exam_url = `${import.meta.env.VITE_DOMIAN}/exam/${item.id}`
      return item
    })
    totalRef.value = data.total
  })
}

async function handleDel({ id }) {
  const { code, msg } = await testApi.delById(id)
  if (code === 2000) {
    ElMessage.success(msg)
    fetchTestList()
  }
}


</script>
<template>
  <div class="test-list-container">
    <el-table :data="testList" style="width: 100%">
      <el-table-column fixed prop="title" label="序号" width="150">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column fixed prop="title" label="二维码" width="150">
        <template #default="scope">
          <el-tooltip placement="top">
            <template #content>
              <!-- <QRCodeVue3 value="Simple QR code" /> -->
              <QRCodeVue3 :value="scope.row.exam_url" :width="300" :height="300" />
            </template>
            <el-icon :size="20">
              <Grid />
            </el-icon>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column fixed prop="title" label="试卷标题" width="150" />
      <el-table-column prop="desc" label="详细描述" width="120" />
      <el-table-column prop="start_time" label="开始时间" width="180">
        <template #default="scope">
          <el-date-picker value-format="x" disabled v-model="scope.row.start_time" type="datetime"
            placeholder="Pick a date" style="width: 100%" />
        </template>
      </el-table-column>
      <el-table-column prop="stop_time" label="截止时间" width="180">
        <template #default="scope">
          <el-date-picker disabled value-format="x" v-model="scope.row.stop_time" type="datetime"
            placeholder="Pick a date" style="width: 100%" />
        </template>
      </el-table-column>
      <el-table-column prop="exam_time_long" label="考试时长（分）" width="140" />
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-button link type="info" size="small">预览</el-button>
          <el-button link type="danger" size="small" @click="handleDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped></style>